use dioxus::prelude::*;
use crate::routes::Route;

#[component]
pub fn MainLayout() -> Element {
    let route = use_route::<Route>();
    rsx! {
        // 主要内容区域布局
        div { class: "flex flex-col h-screen bg-gray-100 dark:bg-gray-900",
            // 顶部导航栏
            header { class: "bg-white dark:bg-gray-800 shadow",
                div { class: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8",
                    div { class: "flex justify-between h-16",
                        div { class: "flex",
                            div { class: "flex-shrink-0 flex items-center",
                                h1 { class: "text-xl font-bold text-gray-900 dark:text-white", "织墨" }
                            }
                        }
                    }
                }
            }

            // 主要内容区域
            div { class: "flex flex-1 overflow-hidden",
                // 侧边栏
                aside { class: "w-64 bg-gray-50 dark:bg-gray-700 shadow border-r border-gray-200 dark:border-gray-600",
                    nav { class: "mt-5 px-2",
                        Link {
                            to: Route::Home {},
                            class: format_args!("group flex items-center px-2 py-2 text-base font-medium rounded-md {} hover:bg-gray-50 hover:text-gray-900",
                                if matches!(route, Route::Home {}) { "bg-gray-100 text-gray-900" } else { "text-gray-600" }
                            ),
                            "首页"
                        }
                        Link {
                            to: Route::Dashboard {},
                            class: format_args!("group flex items-center px-2 py-2 text-base font-medium rounded-md {} hover:bg-gray-50 hover:text-gray-900",
                                if matches!(route, Route::Dashboard {}) { "bg-gray-100 text-gray-900" } else { "text-gray-600" }
                            ),
                            "仪表盘"
                        }
                        Link {
                            to: Route::Settings {},
                            class: format_args!("group flex items-center px-2 py-2 text-base font-medium rounded-md {} hover:bg-gray-50 hover:text-gray-900",
                                if matches!(route, Route::Settings {}) { "bg-gray-100 text-gray-900" } else { "text-gray-600" }
                            ),
                            "设置"
                        }
                        Link {
                            to: Route::Profile {},
                            class: format_args!("group flex items-center px-2 py-2 text-base font-medium rounded-md {} hover:bg-gray-50 hover:text-gray-900",
                                if matches!(route, Route::Profile {}) { "bg-gray-100 text-gray-900" } else { "text-gray-600" }
                            ),
                            "个人资料"
                        }
                        Link {
                            to: Route::Spider {},
                            class: format_args!("group flex items-center px-2 py-2 text-base font-medium rounded-md {} hover:bg-gray-50 hover:text-gray-900",
                                if matches!(route, Route::Spider {}) { "bg-gray-100 text-gray-900" } else { "text-gray-600" }
                            ),
                            "爬虫管理"
                        }
                    }
                }

                // 主内容区域
                main { class: "flex-1 overflow-auto",
                    Outlet::<Route> {}
                }
            }
        }
    }
}